<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>呼叫云</title>
    <link rel="shortcut icon" href="../img/logox_circle.png">
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <script src="../js/jquery-1.11.0.min.js"></script> 
    <script src="../js/config.js"></script>
    <script src="../js/fenye.js"></script> 
    <script src="../common/laydate/laydate.js"></script> 
	<script>
		$(function(){
			$("#showName").val("role3");
			getRoleList();
			//总条数
			var counts = ${count};
			//总页数
			var pageCouts = "";
			if(counts % 10 == 0){
				pageCouts =  parseInt(counts/10);
			}else{
				pageCouts =  parseInt(counts/10) + 1;
			}
			pg = new showPages('pg','${page}',pageCouts,counts);
			
			pg.printHtml(2,pageCouts);        //显示页数
			
			showPages.prototype.createUrl = function (page) { //生成页面跳转url
				if (isNaN(parseInt(page))) page = 1;
				if (page < 1) page = 1;
				if (page > this.pageCount) page = this.pageCount;
				var url = location.protocol + '//' + location.host + location.pathname +"?page="+page;
				
				//获取参数
				var loginName = $("#loginName").val();
				if(loginName != ""){
					url = url+"&loginName="+loginName;
				}
				var name = $("#name").val();
				if(name != ""){
					url = url+"&name="+name;
				}
				var phone = $("#phone").val();
				if(phone != ""){
					url = url+"&phone="+phone;
				}
				var roleCode = $("#roleCode").val();
				if(roleCode != ""){
					url = url+"&roleCode="+roleCode;
				}
				var status = $("#status").val();
				if(status != ""){
					url = url+"&status="+status;
				}
				
				return url;
			}
			
		});
		//启用、禁用
		function updateStatus(userID,markStatus,loginName){
			var message="";
			if(markStatus == 3){//启用
				message = "确定要启用"+loginName+"吗？";
			}else if(markStatus== 0){//禁用
				message = "确定要禁用"+loginName+"吗？";
			}
			
			 if(confirm(message)){
			 		$.ajax({
						 url:serviceConfig.user.updateUserStatus,
						 type: "get",
				         data:{
				         	userID:userID,
				         	markStatus:markStatus
				         },
				         dataType: "json",
				         success:function(data){
				        	 if(data.flag == '1'){
				        	 	window.location.reload();//刷新当前页面.
				        	 }
				         },
				         error:function(data){
				        	 console.log(data);
				         }
					});
	         }
		}
		//删除
		function deleteAdminUser(userID,loginName){
			var message="确定要删除"+loginName+"吗？";
			 if(confirm(message)){
			 		$.ajax({
						 url:serviceConfig.role.deleteAdminUser,
						 type: "get",
				         data:{
				         	userID:userID
				         },
				         dataType: "json",
				         success:function(data){
				        	 if(data.flag == '1'){
				        	 	alert("删除成功！");
				        	 	window.location.reload();//刷新当前页面.
				        	 }
				         },
				         error:function(data){
				        	 console.log(data);
				         }
					});
	         }
		}
		//获取角色列表
		function getRoleList(){
			$.ajax({
				 url:serviceConfig.role.getBackRoleList,
				 type: "get",
		         data:{
		         },
		         dataType: "json",
		         success:function(data){
		        	 if(data.flag == '1'){
		        	 	var roleList = data.roleList;
		        	 	for(var i=0;i<roleList.length;i++){
		        	 		$(".roleCode").append("<option value='"+roleList[i].roleCode+"'>"+roleList[i].roleName+"</option>");
		        	 	}
		        	 	var roleCode = '${roleCode}';
		        	 	if(roleCode != ""){
		        	 		 $("#roleCode").val(roleCode);
		        	 	}
		        	 }
		         },
		         error:function(data){
		        	 console.log(data);
		         }
			});
		}
		//获取用户详情
		function getAdminUser(userID){
			$.ajax({
				 url:serviceConfig.role.getAdminUser,
				 type: "get",
		         data:{
		         	userID:userID
		         },
		         dataType: "json",
		         success:function(data){
		         	//console.log(data);
		        	 if(data.flag == '1'){
		        	 	var userMap = data.userMap;
		        	 	$("#userID").val(userMap.userID);
		        	 	$("#loginNameStr1").val(userMap.loginName);
						$("#nameStr1").val(userMap.name);
						$("#roleID1").val(userMap.roleCode);
						$("#emailStr1").val(userMap.email);
						$("#phoneStr1").val(userMap.phone);
						var sex = userMap.sex;
						if(sex == null){
							sex = "1";
						}
						$("#sex1").val(sex);
						$("#remark1").val(userMap.remark);
		        	 }
		         },
		         error:function(data){
		        	 console.log(data);
		         }
			});
		}
	</script>
</head>

<body>
<div class="lefter">
    <div class="logo"><a href="#" target="_blank"><img style="width:100%;" src="../img/logo3.png" alt="呼叫云后台管理系统" /></a></div>
</div>
<div class="righter nav-navicon" id="admin-nav">
    <div class="mainer">
        <div class="admin-navbar">
            <span class="float-right">
            	<span id="user_name"></span>
                <a class="button button-little bg-yellow" href="login">注销登录</a>
            </span>
            <#include "../common/head.ftl"> 
        </div>
        <div class="admin-bread">
            <ul class="bread">
                <li><a class="icon-user-md"> 权限管理</a></li>
                <li><a >管理用户</a></li>
            </ul>
        </div>
    </div>
</div>
	
<div class="admin">
	<div class="line-big">
		<div class="xm12">
			<form action="getAdminUserList" method="get">
			<div class="xm1" style="padding:0px;padding-top:10px;text-align:right;"><strong>用户名：</strong></div>
			<div class="xm1" style="padding:0px;">
				<input type="text" class="input" id="loginName" name="loginName" value="${loginName}"/>
			</div>
			<div class="xm1" style="padding:0px;padding-top:10px;text-align:right;"><strong>姓名：</strong></div>
			<div class="xm1" style="padding:0px;">
				<input type="text" class="input" id="name" name="name" value="${name}"/>
			</div>
			<div class="xm1" style="padding:0px;padding-top:10px;text-align:right;"><strong>电话号码：</strong></div>
			<div class="xm1" style="padding:0px;">
				<input type="number" class="input" id="phone" name="phone" value="${phone}"/>
			</div>
			<div class="xm1" style="padding:0px;padding-top:10px;text-align:right;"><strong>角色：</strong></div>
			<div class="xm1" style="padding:0px;">
				<select class="roleCode input" id="roleCode" style="width:110%;" name="roleCode">
					<option value="" >请选择角色</option>
				</select>
			</div>
			<div class="xm1" style="padding:0px;padding-top:10px;text-align:right;"><strong>状态：</strong></div>
			<div class="xm1" style="padding:0px;">
				<select class="input" id="status" style="width:110%;" name="status">
					<option value="" >请选择状态</option>
					<option value="0" <#if status=='0' > selected </#if>>禁用</option>
					<option value="3" <#if status=='3' > selected </#if>>启用</option>
				</select>
			</div>
			<div class="xm1" style="padding:0px;text-align:center;padding-left:20px;">
				<button class="button bg-main" type="submit">搜索</button>
			</div>
			</form>
			<div style="float:left;">
				<a class="button bg-main" href="#modal" id="addAdminUser">添加</a>
			</div>
		</div>
	</div>
    <div class="panel admin-panel" style="margin-top:20px;">
    	<div class="panel-head"><strong>管理用户列表</strong></div>
        
        <table class="table table-hover">
        	<tr>
				<th width="40">序号</th>
				<th width="80">用户名</th>
				<th width="100">姓名</th>
				<th width="100">手机号码</th>
				<th width="80">电子邮箱</th>
				<th width="60">性别</th>
				<th width="80">角色</th>
				<th width="60">状态</th>
				<th width="200">备注</th>
				<th width="150">创建时间</th>
				<th width="150">修改时间</th>
				<th width="120">操作</th>
			</tr>
			<#list userList as userMap>
				<#if count gt 0 >
				<tr>
					<td>${userMap_index+1}</td>
						<td>${userMap.loginName}</td>
					    <td>${userMap.name}</td>
						<td>${userMap.phone}</td>
						<td>${userMap.email}</td>
						<td>${userMap.sex}</td>
						<td>${userMap.roleName}</td>
						<td>	
							<#if userMap.status==0 >
							禁用
							<#elseif userMap.status==3 >
							启用
							</#if>
						</td>
						<td>${userMap.remark}</td>
						<td>${userMap.createTime}</td>
						<td>${userMap.updateTime}</td>
						<td>
							<a class="button border-blue button-little updateAdminUser" href="#modal1" id="" onclick="getAdminUser('${userMap.userID}')">修改</a>
							<a class="button border-yellow button-little" href="#" onclick="deleteAdminUser('${userMap.userID}','${userMap.loginName}')">删除</a>
							<#if userMap.status==0 >
								<a class="button border-blue button-little" href="#" onclick="updateStatus('${userMap.userID}','3','${userMap.loginName}')">启用</a>
							<#elseif userMap.status==3 >
								<a class="button border-yellow button-little" href="#" onclick="updateStatus('${userMap.userID}','0','${userMap.loginName}')">禁用</a>
							</#if>
						</td>
				</tr>
				</#if>
			</#list>
			
        </table>
        <div class="panel-foot text-center">
				<#if count gt 0 >
		             <div class="page" id="pages"></div>
		        <#else>
		       <div style="padding-top:30px;"><strong>没有相关数据</strong></div>
				</#if>
        </div>
    </div>
</div>
<div id="modal" class="admin" style="display:none;width:70%;height:70%;border-radius:10px 10px 10px 10px;padding:20px;">
	<#include "addAdminUser.ftl"> 
</div>
<div id="modal1" class="admin" style="display:none;width:70%;height:70%;border-radius:10px 10px 10px 10px;padding:20px;">
	<#include "updateAdminUser.ftl"> 
</div>
</body>
</html>